<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Multiply Alpha</title>
    <style>
      body, html { margin:0; padding:0; }
      #heatmapContainerWrapper { width:800px; height:500px; margin:auto; background:rgba(0,0,0,.1); }
      #heatmapContainer { width:100%; height:100%;}
    </style>
    <script src="/build/heatmap.js"></script>
  </head>
  <body>
    <h1>Multiply Alpha</h1>
    <div id="heatmapContainerWrapper">  
      <div id="heatmapContainer">

      </div>
    </div>
    <script>

      window.onload = function() {
        var heatmap = h337.create({
          container: document.getElementById('heatmapContainer')
        });
        window.h = heatmap;

        h.setData({ max: 10, data: [{ x: 40, y: 40, value: 10 }, { x: 80, y: 40, value: 5 }, { x: 80, y: 80, value: 15 }] })
      
      };
    </script>
  </body>
</html>